<!DOCTYPE HTML>
<html>
<head>
       <title>欢迎光临小峰博客</title>
	   <meta charset="utf-8">
	   <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
	   <!-- 新 Bootstrap 核心 CSS 文件 -->
	<link rel="stylesheet" href="css/bootstrap.min.css">
	<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
	<script src="js/jquery.min.js"></script>
	<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
	<script src="js/bootstrap.min.js"></script>
</head>
<body> 
		<div class="container-fluid">
	    <div class="row">
	        <div class="col-sm-4 col-sm-offset-4 col-xs-10 col-xs-offset-1">
			    <div class="outer">
				<div class="img">
				<img class="img-circle" data-src="holder.js/90x90" src="img/2.jpg">
				</div>
				   <div class="inner">
			     <form>
				     <div class="form-group">     
					      <div class="input-group">
						   <span class="input-group-addon">
								 <i class="glyphicon glyphicon-envelope"></i>
						   </span>
					      <input type="text" class="form-control" id="username" placeholder="邮箱"/>
						  </div>
					 </div><!-- username-->
					  <div class="form-group">
					       <div class="input-group">
							  <span class="input-group-addon">
									<i class="glyphicon glyphicon-lock"></i>
							  </span>
							<input type="password" class="form-control" id="password" placeholder="密码"/>
						  </div>
					 </div><!-- password -->
					 <div class="form-group">
					  <label  class="control-label"></label>
					      <label class="checkbox-inline">
					      <input type="checkbox" id="remeberPwd" />记住密码</label>
						  <label class="checkbox-inline" id="forgetPwd"><a href="#" />忘记密码?</a></label>
					 </div><!-- checkbox -->
					 <div class="form-group">
					      <button class="btn btn-info">登&nbsp;&nbsp;&nbsp;陆</button>
					 </div><!-- button -->
				 </form>
				 </div>
				 </div>
			</div>
			</div>
	   </div>
</body>
</html>
<style type="text/css">
body{
    background: radial-gradient(ellipse, white, lightblue);
    background: -ms-radial-gradient(ellipse, white, lightblue);
    background: -webkit-radial-gradient(ellipse, white, lightblue);
    background: -moz-radial-gradient(ellipse, white, lightblue);
}
 .outer{
	  position: relative;
      margin-top:130px;
      background-color:white;
	  padding:20px;
      width:300px;
	  height:250px;
	  -webkit-box-shadow: 3px 3px 10px gray;  
	  -moz-box-shadow: 3px 3px 10px gray;  
	  box-shadow: 3px 3px 10px gray;  
 }
 .inner{
    margin-top:8px;
 }
 button{
   width:260px;
 }
 a:link{
   color:black;
 }
 a:hover{
   color:blue;
 }
#forgetPwd{
   margin-left:88px;
 }
 .img{
 text-align:center;
 }
 img{
 width: 100px; 
 height: 100px;
 margin-top:-70px;
 padding:8px;
 background-color:white;
 -webkit-box-shadow: 2px 2px 5px gray;  
 -moz-box-shadow: 2px 2px 5px gray;  
 box-shadow: 2px 2px 5px gray;  
 }
</style>